<template>
  <div class="wrap">

    <SkyCardPanel title="树形控件">
      <div slot="header-right">
        <SkyButton type="primary" @click="getInfo">操作</SkyButton>
      </div>
      <div slot="main">
        <div class="search-top">
          <SkyInput v-model="filterText" placeholder="输入关键字进行过滤"></SkyInput>
        </div>

        <div class="tree-panel">
          <SkyTree v-if="treeData.length>0" ref="tree" :treeData="treeData" :defaultExpandedKeys="['1_1']" :filter-node-method="filterNode" :render-func="renderFunc" node-key="id" :currentNodeKey="'1_2'" :props="props" @node-click="handleNodeClick"></SkyTree>
        </div>
      </div>
    </SkyCardPanel>

  </div>
</template>

<script>

export default {
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true;
      if (data.mylabel.indexOf(value) !== -1) {
        return true
      }
      ;
    },
    handleNodeClick (current) {
      console.log(current)
    },
    renderFunc (h, label) {
      return (
        <span>{label}</span>
      )
    },
    getInfo () {

      // console.log(this.$refs.tree.setCurrentKey('1_4'))
      // console.log(this.$refs.tree.getCurrentNode())

      // console.log(this.$refs.tree.getCurrentKey())

      // this.$refs.tree.remove(this.$refs.tree.getCurrentNode())

      // this.$refs.tree.updateKeyChildren("1_4", [
      //   {
      //     id: "1_44",
      //     mylabel: "测试1",
      //     meta: { text: "测试1" },
      //   },
      //   {
      //     id: "1_55",
      //     mylabel: "测试2",
      //     meta: { text: "测试2" },
      //   }
      // ])

      console.log(this.$refs.tree.store)
    },
  },
  data () {
    return {
      filterText: "",
      props: {
        children: 'mychildren',
        label: 'mylabel',
      },
      treeData: []
    };
  },
  mounted () {
    this.treeData = [
      {
        id: '1',
        mylabel: "系统管理",
        meta: { text: "系统管理" },
        mychildren: [
          {
            id: '1_1',
            mylabel: "员工管理",
            meta: { text: "员工管理" }
          },
          {
            id: '1_2',
            mylabel: "角色管理",
            meta: { text: "角色管理" }
          },
          {
            id: '1_3',
            mylabel: "权限管理",
            meta: { text: "权限管理" }
          },
          {
            id: '1_4',
            mylabel: "日常管理",
            meta: { text: "日常管理" },
            mychildren: [
              {
                id: '1_4_1',
                mylabel: "考勤管理",
                meta: { text: "考勤管理" }
              },
              {
                id: '1_4_2',
                mylabel: "绩效管理",
                meta: { text: "绩效管理" }
              }
            ]
          }
        ]
      }
    ]
  }
};
</script>

<style lang="scss" scoped>
.search-top {
  margin-bottom: 10px;
}
.tree-panel {
  // background: white;
  // min-height: 200px;
}
</style>
